<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 6000px;
        }

        textarea {
            display: none;
            margin: 200px;
        }

        button {
            display: none;
            margin: 200px;
        }
    </style>
</head>

<body>

    <textarea name="" id="" rows="7" cols="30">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  </textarea>

    <button>顶部</button>

    <script>
        const tx = document.querySelector('textarea')
        // tx.addEventListener('scroll', function () {
        //   console.log(tx.scrollTop)
        // })

        // document.documentElement.scrollTop = 800
        // window.addEventListener('scroll', function () {
        //   // console.log('动了')
        //   console.log(document.documentElement.scrollTop)
        //   const n = document.documentElement.scrollTop

        //   if (n >= 100) {
        //     tx.style.display = 'block'
        //   } else {
        //     tx.style.display = 'none'
        //   }
        // })

        const btn = document.querySelector('button')
        window.addEventListener('scroll', function () {
            // console.log('动了')
            console.log(document.documentElement.scrollTop)
            const n = document.documentElement.scrollTop

            if (n >= 100) {
                btn.style.display = 'block'
            } else {
                btn.style.display = 'none'
            }
            btn.addEventListener('click', function () {
                window.scrollTo(0, 0)
            })
        })


    </script>


</body>

</html>